<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/admin/css/chat.css">
</head>
<body>
<div class="container-fluid h-100">
    <div class="row h-100">
        <!-- 左侧好友列表 -->
        <div class="col-3 h-100 bg-light border-right" id="friends-list">
            <div class="p-3 border-bottom">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索好友">
                    <button class="btn btn-outline-secondary" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

            <div class="list-group h-100 overflow-auto" id="friends">
                <!-- 好友项会通过JS动态添加 -->
            </div>
        </div>

        <!-- 中间聊天区域 -->
        <div class="col-6 h-100 border-right" id="chat-area">
            <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <img src="https://picsum.photos/id/1/40/40" alt="对方头像" class="rounded-circle mr-2">
                    <h5 id="current-friend-name">选择一位好友开始聊天</h5>
                </div>
                <!--                <div>-->
                <!--                    <button class="btn btn-outline-secondary btn-sm">-->
                <!--                        <i class="fa fa-phone"></i>-->
                <!--                    </button>-->
                <!--                    <button class="btn btn-outline-secondary btn-sm">-->
                <!--                        <i class="fa fa-video-camera"></i>-->
                <!--                    </button>-->
                <!--                    <button class="btn btn-outline-secondary btn-sm">-->
                <!--                        <i class="fa fa-ellipsis-v"></i>-->
                <!--                    </button>-->
                <!--                </div>-->
            </div>

            <!-- 聊天内容区域 -->
            <div class="h-75 p-3 overflow-auto" id="chat-messages">
                <!-- 消息会通过JS动态添加 -->
                <div class="text-center text-muted py-5" id="empty-chat">
                    选择一位好友开始聊天
                </div>
            </div>

            <!-- 消息输入区域 -->
            <div class="p-3 border-top" id="message-input-area">
                <div class="d-flex mb-2">
                    <button class="btn btn-outline-secondary btn-sm mr-2" id="emoji-btn">
                        <i class="fa fa-smile-o"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm mr-2" id="image-btn">
                        <i class="fa fa-image"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm">
                        <i class="fa fa-paperclip"></i>
                    </button>
                </div>

                <div class="d-flex">
                    <input type="text" class="form-control mr-2" id="message-input" placeholder="输入消息...">
                    <button class="btn btn-primary" id="send-btn">发送</button>
                </div>

                <!-- 表情选择器 (默认隐藏) -->
                <div class="mt-2 p-3 bg-white rounded border" id="emoji-picker" style="display: none;">
                    <!-- 表情会通过JS动态添加 -->
                </div>

                <!-- 图片上传 (默认隐藏) -->
                <div class="mt-2" id="image-upload" style="display: none;">
                    <input type="file" id="image-file" accept="image/*">
                    <button class="btn btn-sm btn-primary mt-2" id="send-image-btn">发送图片</button>
                </div>
            </div>
        </div>

        <!-- 右侧搜索历史消息 -->
        <div class="col-3 h-100 bg-light" id="search-area">
            <div class="p-3 border-bottom">
                <div class="input-group">
                    <input type="text" class="form-control" id="search-input" placeholder="搜索历史消息">
                    <button class="btn btn-outline-secondary" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

            <div class="p-3 border-bottom">
                <h6>搜索结果</h6>
            </div>

            <div class="h-80 p-3 overflow-auto" id="search-results">
                <!-- 搜索结果会通过JS动态添加 -->
                <div class="text-center text-muted py-5">
                    输入关键词搜索消息
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/admin/js/chat.js"></script>
</body>
</html>
